<template>
  <div class="app-container">

    <div id="container"></div>

  </div>
</template>
 
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';

import { onMounted, defineProps, watch } from 'vue';
import { shallowRef } from '@vue/reactivity'

const props = defineProps({
  position: {
    type: Array,
    default: [0, 0]
  }
})

let Datamap = shallowRef(null);

const initMap = (p = [0, 0]) => {
  if (p.some(item => isNaN(item)) || p.length < 2) return
  // if (Datamap) {
  //   Datamap.setCenter(p);
  //   return;
  // }
  AMapLoader.load({
    key: "7e26e79d183ec473317573b4d8692b0d",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar',
      'AMap.Scale',
      'AMap.HawkEye',
      'AMap.MapType',
      'AMap.Geolocation',],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    domContentLoaded: true
  }).then((AMap) => {
    Datamap.value = new AMap.Map("container", {  //设置地图容器id
      viewMode: "3D",    //是否为3D地图模式
      zoom: 13,           //初始化地图级别
      center: p, //初始化地图中心点位置,
      pitch: 20,
      terrain: true
    });
    const marker = new AMap.Marker({
      position: p,
      map: Datamap.value,
      title: "服务地址"
    });
    Datamap.value.addControl(new AMap.ToolBar());

    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
    Datamap.value.addControl(new AMap.Scale());

    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
    Datamap.value.addControl(new AMap.HawkEye({ isOpen: true }));

    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    Datamap.value.addControl(new AMap.MapType());
    

    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
    Datamap.value.addControl(new AMap.Geolocation());
  }).catch(e => {
    console.log(e);
  })
}

watch(() => props.position, (n, o) => {  //当经纬度发生变化
  if (n.some(item => (isNaN(item) || item == '')) || n.length < 2) return

  initMap([n[0] - 0, n[1] - 0]);
})

onMounted(() => {

  initMap(props.position.map(item => item - 0))

})

</script>

<style>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>